<template>
  <div class="tapStyle secondary-page-mode">
     <div class="secondary-toolbar">
          <span>时间选择 : </span>&nbsp;
          <div class="layoutBox" style="width:242px">
            <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>&emsp;&emsp;
          <el-button @click="search"><i class="iconfont icon-sousuo"></i>查询</el-button>
     </div>
     <div class="currency-mode-wrap">
          <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                type="index"
                :index="indexMethod"
                width="50">
              </el-table-column>
              <el-table-column
                prop="date"
                label="巡检日期">
              </el-table-column>
              <el-table-column
                prop="person"
                label="巡检人员">
              </el-table-column>
               <el-table-column
                prop="name"
                label="仪器参数设置及更改">
                    <template>
                      <div>
                          <span class="detailBtn">查看详情</span>
                      </div>
                    </template>
              </el-table-column>
               <el-table-column
                prop="name"
                label="巡检维护">
                 <template>
                      <div>
                          <span class="detailBtn" @click="visiDialog=true">查看详情</span>
                      </div>
                 </template>
              </el-table-column>
               <el-table-column
                prop="name"
                label="试剂及标准样品更换">
                 <template>
                      <div>
                          <span class="detailBtn" @click="visiDialogtwo=true">查看详情</span>
                      </div>
                 </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="耗材及配件更换">
                 <template>
                      <div>
                          <span class="detailBtn">查看详情</span>
                      </div>
                 </template>
              </el-table-column>
               <el-table-column
                prop="name"
                label="仪器设备检修">
                 <template>
                      <div>
                          <span class="detailBtn">查看详情</span>
                      </div>
                 </template>
              </el-table-column>
               <el-table-column
                prop="name"
                label="访客登记">
                 <template>
                      <div>
                          <span class="detailBtn">查看详情</span>
                      </div>
                 </template>
              </el-table-column>
               <el-table-column
                prop="name"
                label="废液处理">
                 <template>
                      <div>
                          <span class="detailBtn">查看详情</span>
                      </div>
                 </template>
              </el-table-column>
          </el-table>
     </div>
    <el-dialog :visible.sync="visiDialog"  width="1400px" title="水站巡检维护" :before-close="closess">
       <div class="dialogcontent" style="height:600px">
             <el-scrollbar style="height:100%">
              <table class="whTable">
                      <tr>
                          <td>水站名称</td>
                          <td>后寨</td>
                          <td>水站编号</td>
                          <td>A410800_0002</td>
                          <td>运维单位</td>
                          <td colspan="3">宇星科技发展(深圳)有限公司</td>
                      </tr>
                       <tr>
                          <td>巡检人员</td>
                          <td>邢滨滨</td>
                          <td>巡检日期</td>
                          <td>2019-03-17</td>
                          <td>天气情况</td>
                          <td colspan="3">
                              <el-radio-group v-model="radio">
                                <el-radio :label="1">晴</el-radio>
                                <el-radio :label="2">阴</el-radio>
                                <el-radio :label="3">小雨</el-radio>
                                <el-radio :label="4">大雨</el-radio>
                                <el-radio :label="5">暴雪</el-radio>
                                <el-radio :label="6">雪</el-radio>
                                <el-radio :label="7">台风</el-radio>
                              </el-radio-group>
                          </td>
                      </tr>
                      <tr>
                         <td>站房温度</td>
                         <td colspan="3">
                              <el-radio-group v-model="radio">
                                <el-radio :label="1">大于45℃ </el-radio>
                                <el-radio :label="2">45-30℃</el-radio>
                                <el-radio :label="3">30-15℃</el-radio>
                                <el-radio :label="4">15-5℃</el-radio>
                                <el-radio :label="5">小于5℃</el-radio>
                              </el-radio-group>
                         </td>
                         <td>站房湿度</td>
                         <td colspan="3">
                              <el-radio-group v-model="radio">
                                <el-radio :label="1">大于等于90%RH </el-radio>
                                <el-radio :label="2">小于90%RH</el-radio>
                              </el-radio-group>
                         </td>
                      </tr>
                      <tr class="tablehead">
                          <td colspan="2">项目</td>
                          <td colspan="3">情况</td>
                          <td colspan="3">具体情况说明</td>
                      </tr>
                      <tr v-for="(item,key) in projectArr" :key="key" class="projectTr">
                          <td :rowspan="item.rowspan" v-if="item.rowspan">{{item.modulName}}</td>
                          <td>{{item.projectName}}</td>
                          <td colspan="3" class="selectTd" v-if="item.projectName != '其它'">
                               <el-radio-group v-model="item.radio" v-if="item.type==2">
                                <el-radio :label="1">有</el-radio>
                                <el-radio :label="2">无</el-radio>
                              </el-radio-group> 
                              <el-radio-group v-model="item.radio" v-if="item.type == 5">
                                <el-radio :label="1">无色</el-radio>
                                <el-radio :label="2">蓝色</el-radio>
                                 <el-radio :label="3">绿色</el-radio>
                                <el-radio :label="4">褐色</el-radio>
                                 <el-radio :label="5">黑色</el-radio>
                                <el-radio :label="6">其他</el-radio>
                              </el-radio-group>
                              <el-radio-group v-model="item.radio" v-if="item.type == 6">
                                <el-radio :label="1">上游放水</el-radio>
                                <el-radio :label="2">上游蓄水</el-radio>
                                 <el-radio :label="3">下游放水 </el-radio>
                                <el-radio :label="4">下游蓄水</el-radio>
                                 <el-radio :label="5">无</el-radio>
                              </el-radio-group>
                               <el-radio-group v-model="item.radio" v-if="item.type ==7 ">
                                <el-radio :label="1">涨潮</el-radio>
                                <el-radio :label="2">退潮</el-radio>
                                 <el-radio :label="5">无</el-radio>
                              </el-radio-group>
                          </td>
                          <td colspan="6" v-if="item.projectName == '其它'">
                                <el-input v-model="item.value"></el-input>
                          </td>
                          <td colspan="3" v-if="item.projectName != '其它'">
                                <el-input v-model="item.value"></el-input>
                          </td>
                      </tr>
                     
              </table>
              <table  class="whTable">
                  <tr class="tablehead">
                          <td colspan="2" style="border-top:0px">巡检项目</td>
                          <td colspan="3" style="border-top:0px">巡检情况</td>
                          <td colspan="3" style="border-top:0px">具体情况说明</td>
                      </tr>
                      <tr v-for="(item,key) in InspecArr" :key="key" class="projectTr">
                          <td :rowspan="item.rowspan" v-if="item.rowspan">{{item.modulName}}</td>
                          <td>{{item.projectName}}</td>
                          <td colspan="3" class="selectTd">
                              <el-radio-group v-model="item.radio" v-if="item.type==0">
                                <el-radio :label="1">正常</el-radio>
                                <el-radio :label="2">异常</el-radio>
                              </el-radio-group>
                              <el-radio-group v-model="item.radio" v-if="item.type==1">
                                <el-radio :label="1">清洗</el-radio>
                                <el-radio :label="2">未清洗</el-radio>
                              </el-radio-group>
                              <el-radio-group v-model="item.radio" v-if="item.type==2">
                                <el-radio :label="1">有</el-radio>
                                <el-radio :label="2">无</el-radio>
                              </el-radio-group>
                              <el-radio-group v-model="item.radio" v-if="item.type==3">
                                <el-radio :label="1">清理</el-radio>
                                <el-radio :label="2">未清理</el-radio>
                                <el-radio :label="3">无杂物或漏水</el-radio>
                              </el-radio-group>
                              <el-radio-group v-model="item.radio" v-if="item.type==4">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="2">否</el-radio>
                                <el-radio :label="3">不需要</el-radio>
                              </el-radio-group>
                          </td>
                          <td colspan="3">
                                <el-input v-model="item.value"></el-input>
                          </td>
                  </tr>
                  <tr class="projectTr">
                          <td>备注</td>
                          <td colspan="7"> <el-input v-model="remark"></el-input></td>
                  </tr>
              </table>
             </el-scrollbar>
       </div>
    </el-dialog>
    <el-dialog :visible.sync="visiDialogtwo"  width="800px" title="试剂及标准样品更换" :before-close="closess">
       <div  style="height:500px">
           <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                type="index"
                :index="indexMethod"
                width="50">
              </el-table-column>
              <el-table-column
                prop="date"
                width="150"
                label="设备名称">
              </el-table-column>
              <el-table-column
                prop="person"
                label="试剂名称">
              </el-table-column>
               <el-table-column
                prop="person"
                width="130"
                label="试剂体积(ml)">
              </el-table-column>
               <el-table-column
                prop="person"
                label="配置时间">
              </el-table-column>
               <el-table-column
                prop="person"
                label="有效期至">
              </el-table-column>
               <el-table-column
                prop="person"
                label="更换原因">
              </el-table-column>
          </el-table>
       </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dateRange: "",
      visiDialogtwo:false,
      tableData: [{ date: "2019-03-19", person: "刘森", name: "1" }],
      visiDialog: false,
      radio:1,
      remark:'11',
      projectArr:[{ modulName:'采水口水体情况',projectName:'颜色',type:5,radio:1,value:'测试'},
      { modulName:'采水口水体情况',projectName:'异味',type:2,radio:1,value:'测试'},
      { modulName:'采水口水体情况',projectName:'悬浮物',type:2,radio:1,value:'测试'},
      { modulName:'采水口水体情况',projectName:'排污口(100米内)',type:2,radio:1,value:'测试'},
      { modulName:'采水口水体情况',projectName:'放/蓄水',type:6,radio:1,value:'测试'},
      { modulName:'采水口水体情况',projectName:'过往船只(100米内)',type:2,radio:1,value:'测试'},
      { modulName:'采水口水体情况',projectName:'涨退潮',type:7,radio:1,value:'测试'},
      { modulName:'采水口水体情况',projectName:'其它',value:'测试'},],
      //巡检项目数据
      InspecArr:[{ modulName:'采样单元',projectName:'采水口',type:0,radio:1,value:'测试'},
      { modulName:'采样单元',projectName:'采样泵',type:0,radio:1,value:'测试'},
      { modulName:'采样单元',projectName:'采水管路',type:0,radio:1,value:'测试'},
      { modulName:'采样单元',projectName:'沉砂池',type:0,radio:1,value:'测试'},
      { modulName:'采样单元',projectName:'采样杯',type:0,radio:1,value:'测试'},
      { modulName:'配水单元',projectName:'是否清洗',type:1,radio:1,value:'测试'},
      { modulName:'配水单元',projectName:'手阀/电动阀',type:0,radio:1,value:'测试'},
      { modulName:'配水单元',projectName:'管路滴漏堵塞',type:2,radio:1,value:'测试'},
      { modulName:'配水单元',projectName:'增压泵',type:0,radio:1,value:'测试'},
      { modulName:'配水单元',projectName:'空气泵',type:0,radio:1,value:'测试'},
      { modulName:'数据采集单元',projectName:'工况机硬件',type:0,radio:1,value:'测试'},
      { modulName:'数据采集单元',projectName:'工况机软件',type:0,radio:1,value:'测试'},
      { modulName:'辅助单元',projectName:'空调',type:0,radio:1,value:'测试'},
      { modulName:'辅助单元',projectName:'监控',type:0,radio:1,value:'测试'},
      { modulName:'辅助单元',projectName:'纯水机',type:0,radio:1,value:'测试'},
      { modulName:'辅助单元',projectName:'电路及UPS',type:0,radio:1,value:'测试'},
      { modulName:'辅助单元',projectName:'通讯',type:0,radio:1,value:'测试'},
      { modulName:'辅助单元',projectName:'消防',type:0,radio:1,value:'测试'},
      { modulName:'仪器设备',projectName:'PH分析仪',type:0,radio:1,value:'测试'},
      { modulName:'仪器设备',projectName:'溶解氧分析仪',type:0,radio:1,value:'测试'},
      { modulName:'仪器设备',projectName:'电导率分析仪',type:0,radio:1,value:'测试'},
      { modulName:'仪器设备',projectName:'浊度分析仪',type:0,radio:1,value:'测试'},
      { modulName:'仪器设备',projectName:'高锰酸盐分析仪',type:0,radio:1,value:'测试'},
      { modulName:'仪器设备',projectName:'氨氮分析仪',type:0,radio:1,value:'测试'},
      { modulName:'仪器设备',projectName:'总磷分析仪',type:0,radio:1,value:'测试'},
      { modulName:'仪器设备',projectName:'总氮分析仪',type:0,radio:1,value:'测试'},
      { modulName:'其他工作',projectName:'废液处理',type:2,radio:1,value:'测试'},
      { modulName:'其他工作',projectName:'打扫卫生',type:2,radio:1,value:'测试'},
      { modulName:'其他工作',projectName:'站房漏水、周围杂草及积水',type:3,radio:1,value:'测试'},
      { modulName:'其他工作',projectName:'封冻期前维护',type:4,radio:1,value:'测试'},
],
    };
  },
  created() {
    this.$store.commit("setShowlefttree", true);
    for(let i=0;i<this.InspecArr.length;i++){
        let num = this.adda(i,'modulName','rowspan',this.InspecArr);
        i+=num-1
    };
    for(let i=0;i<this.projectArr.length;i++){
        let num = this.adda(i,'modulName','rowspan',this.projectArr);
        i+=num-1
    };
    console.log(this.InspecArr)
  },
  methods: {
    indexMethod(index) {
      return index + 1;
    },
    adda(inedx,prop,key,arr){
        let name = arr[inedx][prop];
        let row = 0;
        for(let i=inedx;i<arr.length;i++){
          if(name == arr[i][prop]){
            row++
          }else{
            break;
          }
        }
        arr[inedx][key] = row;
        return row
    },
    closess(done) {
      done();
    },
    search() {}
  }
};
</script>

<style scoped lang="less">
.detailBtn {
  cursor: pointer;
}

</style>
